<template>
  <div>
    <header class="app-header">在线考试</header>
    <div class="aa">
      <div class="test">
        <div class="test-title">
          <span class="test-num">{{index+1}}---</span>{{item&&item.title}}
          <button @click="tips">提示</button>
        </div>
        <div class="test-answer" v-for="(v,i) in options" :key='i'>
          <label for="">
            <input type="checkbox">{{v.index}} {{v.value}}
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState('msbd', ['questions','index']),
    item () {
      return this.questions[0] && this.questions[this.index]
    },
    options () {
      return this.item ? JSON.parse(this.item.options) : []
    }
  },
  methods: {
    ...mapActions('msbd', ['getQuestion']),
    tips(){
      this.$toast(this.questions.tips, 1500)
    }
  },
  mounted () {
    this.getQuestion()
  }
}
</script>

<style scoped>
.aa {
  height: calc(100vh - 120px);
  overflow: hidden;
  overflow-y: auto;
}

.test {
  padding: 10px;
}

.test-title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0px;
}

.test-num {
  font-style: italic;
  color: #999;
}

.test-answer div {
  padding: 5px 0;
}

.test-answer {
    padding: 10px 0;
}
</style>